
<html lang="en">
<head>
    <#include "../common/header.ftl" />
     <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css" type="text/css" />
     <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>

        <script>
            $(function () {
                //获取所有根地区
                $.get('/region/selectByParent.do',{type:'tree'},function (data) {
                    $('#treeview1').treeview({
                        data:[{text: '全部地区',nodes:data}],
                        showTags: true, //显示标签
                        lazyLoad:function (node) { //node就是当前点击的节点
                            $.get('/region/selectByParent.do',{parentId:node.id,type:'tree'},function (data) {
                                //第一个参数是要添加进去的子地区,第二个是添加到上级地区的位置
                                $('#treeview1').treeview('addNode', [ data, node ]);
                            })
                        },
                        onNodeSelected:function (event, node) {//节点被选择的事件
                            loadData(node.id);
                        }
                    });
                })

                function loadData(id){
                    $.get('/region/selectByParent.do',{parentId:id,type:'table'},function (data) {
                        $("#regionTable tbody").empty();//清空数据
                        $.each(data,function (index, ele) {
                            //克隆模板
                            var tr = $("#template tr").clone(true);
                            //填充内容
                            $(tr).find('td:nth-child(1)').html(index+1);
                            $(tr).find('td:nth-child(2)').html(ele.name);
                            $(tr).find('a').attr('data-json',ele.json);
                            if(ele.state==1){//判断是否推荐状态
                                $(tr).find('a.btn-hot').addClass('btn-danger').removeClass('btn-success');
                                $(tr).find('a.btn-hot').html('<span class="glyphicon glyphicon-star-empty"></span>取消推荐');
                            }
                            //添加到页面
                            $("#regionTable tbody").append(tr);
                        })

                    })
                }

                //添加/编辑按钮
                $(".btn-input").click(function () {
                    $("#inputModal input").val('');
                    var json = $(this).data('json');
                    if(json){
                        $("#inputModal input[name=id]").val(json.id);
                        $("#inputModal input[name=name]").val(json.name);
                        $("#parentId").val(json.parentId);
                        $("#parentName").val(json.parentName);
                    }else{
                        //获取选中的地区
                        var arr = $('#treeview1').treeview('getSelected');
                        //设置到模态框
                        if(arr.length>0){
                            $("#parentId").val(arr[0].id);
                            $("#parentName").val(arr[0].text);
                        }
                    }
                    $("#inputModal").modal('show');
                })

                //提交按钮
                $(".btn-submit").click(function () {
                    $("#editForm").ajaxSubmit(function (data) {
                        if (data.success) {
                            //获取选中的地区
                            var arr = $('#treeview1').treeview('getSelected');
                            //设置到模态框
                            if(arr.length>0){
                                loadData(arr[0].id);
                            }
                            $("#inputModal").modal('hide');
                        } else {
                            $.messager.alert("温馨提示", data.errorMsg + ",1秒之后自动刷新");
                        }

                    })
                })

                //推荐按钮
                $(".btn-hot").click(function () {
                    var json = $(this).data('json');
                    $.post('/region/updateState.do',{id:json.id,state:json.state^1},function (data) {
                        if (data.success) {
                            //获取选中的地区
                            var arr = $('#treeview1').treeview('getSelected');
                            //设置到模态框
                            if(arr.length>0){
                                loadData(arr[0].id);
                            }

                        } else {
                            $.messager.alert("温馨提示", data.errorMsg + ",2秒之后自动刷新");
                        }
                    })
                })
            })

        </script>

</head>
<body>
<table id="template" style="display:none;">
<tr>
    <td>1</td>
    <td>2</td>
    <td>
        <a class="btn btn-info btn-xs btn-input" >
            <span class="glyphicon glyphicon-pencil"></span>编辑
        </a>

        <a class="btn btn-success btn-xs btn-hot" >
            <span class="glyphicon glyphicon-star"></span>设为推荐
        </a>
    </td>
</tr>
</table>

<div class="container " style="margin-top: 20px">
    <#include "../common/top.ftl" />

    <div class="row">
    <div class="col-sm-3">
        <!--菜单回显-->
         <#assign currentMenu="region"/>
        <#include "../common/menu.ftl" />
    </div>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="page-head-line">旅游地区管理</h1>
            </div>
        </div>


        <a href="javascript:;" class="btn btn-success btn-input">添加</a>

        <div class="row">
            <div class="col-sm-4">
                <div id="treeview1"></div>
            </div>
            <div class="col-sm-8">
                <table id="regionTable" class="table table-striped table-hover">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

            </div>
        </div>

    </div>
</div>
</div>



<div class="modal fade" id="inputModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/region/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id">
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label">名称：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="name" name="name"
                                   placeholder="请输入地区名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sn" class="col-sm-4 control-label">上级地区：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="parentName" readonly>
                            <input type="hidden" class="form-control" id="parentId" name="parent.id" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">戳我取消</button>
                <button type="button" class="btn btn-primary btn-submit">朕要保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</body>
</html>